<template>
  <div class="siteListPage">
    <div class="top-button add_btn_top">
      <div class="showTree">显示树</div>
      <el-switch class="switch" v-model="display" @change="togleCollapse">
      </el-switch>
      <div class="line"></div>
      <!-- 添加站点按钮 -->
      <el-button
        v-permission="[1, 'button']"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="addToSite = true"
        >添加
      </el-button>
    </div>

    <!-- 添加站点弹窗 -->
    <el-dialog
      title="添加站点"
      :lock-scroll="false"
      :visible.sync="addToSite"
      v-dialogDrag
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <add-site @submitadd="submitForm" @closaddsite="closedialogForm" />
    </el-dialog>

    <div class="res_con">
      <!-- <ResizeBox :width="'282px'"> -->
      <div class="treebox" v-if="display">
        <!-- <el-aside width="100%"> -->
        <el-menu
          router
          unique-opened
          :default-active="$route.path"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-input
            class="treeInput"
            placeholder="请输入"
            suffix-icon="el-icon-search"
            v-model="filterText"
            size="mini"
          >
          </el-input>
          <div class="all_open">
            <div class="open_box" @click="unFoldAll2(treedata)">
              <img class="icon" src="../../assets/treeicon1.png" />
              <span class="expandAll text_nowrap">全部展开</span>
            </div>
            <div class="verticalLine"></div>
            <div class="open_box" @click="collapseAll2(treedata)">
              <img class="icon" src="../../assets/treeicon2.png" />
              <span class="closeAll text_nowrap">全部收起</span>
            </div>
          </div>
          <el-tree
            v-init-screen-h="10"
            class="filter-tree"
            :data="treedata"
            :props="defaultProps"
            default-expand-all
            accordion
            :filter-node-method="filterNode"
            highlight-current
            ref="tree"
            node-key="id"
            @node-click="treeListClick"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span v-if="data.type == '1'" class="type_display">
                <svg-icon icon-class="level1" class="treeSvg" />
                <span>
                  {{ data.name }}
                </span>
              </span>
              <span v-if="data.type == '2'" class="type_display">
                <svg-icon icon-class="level2" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '3'" class="type_display">
                <svg-icon icon-class="level3" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '4'" class="type_display">
                <svg-icon icon-class="level4" class="treeSvg" />
                {{ data.name }}
              </span>
              <span v-if="data.type == '5'" class="type_display">
                <div
                  class="treeSvg5"
                  :style="{
                    background: data.color != null ? data.color : ''
                  }"
                ></div>

                {{ data.name }}
              </span>
            </span>
          </el-tree>
        </el-menu>
      </div>
      <!-- </ResizeBox> -->

      <div class="content_site_list" v-permission="[4, 'list']">
        <div v-init-screen-h>
          <EmptyData v-if="areaList && areaList.length == 0"></EmptyData>
          <el-row :gutter="20">
            <el-col
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="4"
              v-for="(area, index) in areaList"
              :key="index"
              class="mb_sm"
            >
              <ImgTitleContent
                :item="area"
                @handNavTo="toLinkSiteName(area.token)"
              ></ImgTitleContent>
              <!-- <div class="siteList" @click="toLinkSiteName(area.token)">
                <div class="populationBox">
                  <div class="imgBox">
                    <el-image :src="area.imageUrl" class="siteImg" />
                  </div>
                  <div class="contentBox">
                    <div class="siteName">{{ area.name }}</div>
                    <div class="siteText">{{ area.description }}</div>
                  </div>
                </div>
              </div> -->
            </el-col>
          </el-row>
        </div>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCookie } from "@/utils/auth";
import "../../assets/style/siteCss/siteListStyle.css";
import ResizeBox from "@/components/ResizeBox";
import AddSite from "../siteAdmin/AddSite.vue";
import Pagination from "../../views/common/page.vue";
import { getDeviceTree } from "@/api/device";
import { getDevicesV2Tree } from "@/api/deviceOperation";
import { getDistributionAreas } from "@/api/superlinkAreat";
import ImgTitleContent from "@/components/ImgTitleContent";
import EmptyData from "@/views/common/emptyData";
export default {
  components: {
    ImgTitleContent,
    AddSite,
    Pagination,
    ResizeBox,
    EmptyData
  },
  data() {
    return {
      style: "",
      display: true,
      isCollapse: false,
      addToSite: false,
      filterText: "",
      treedata: [
        {
          name: "2333",
          id: 0
        }
      ],
      areaList: [],
      areaEntiry: {},
      areaToken: this.$route.query.areaToken,
      defaultProps: {
        children: "children",
        label: "name"
      },
      currentPage: 1, //初始页
      // pagesize: 14,    // 每页的数据
      // totalCount: 0
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      svgShow: true,
      statusBgc: "red"
    };
  },
  mounted() {
    this.areaList = null;
    this.getTree();
    this.getSiteList();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    toggleButton() {
      if (this.isCollapse) {
        return "minMargin";
      } else {
        return "maxMargin";
      }
    }
  },
  methods: {
    setAllExpand(arr, isExpand) {
      let self = this;
      arr.forEach(el => {
        console.log("data :>> ", el.id);
        self.$refs.tree.store.nodesMap[el.id].expanded = isExpand;
        if (el.children) {
          self.setAllExpand(el.children, isExpand);
        }
      });
    },
    // 树全部展开
    unFoldAll2(data) {
      this.setAllExpand(data, true);
      // let self = this;
      // console.log("123 :>> ", self.$refs.tree);
      // data.forEach((el) => {
      //   self.$refs.tree.store.nodesMap[el.id].expanded = true;
      //   el.children && el.children.length > 0
      //     ? self.unFoldAll2(el.children)
      //     : ""; // 子级递归
      // });
    },
    // 全部折叠
    collapseAll2(data) {
      this.setAllExpand(data, false);
      // let self = this;
      // data.forEach((el) => {
      //   self.$refs.tree.store.nodesMap[el.id].expanded = false;
      //   el.children && el.children.length > 0
      //     ? self.collapseAll2(el.children)
      //     : ""; // 子级递归
      // });
    },
    // 菜单折叠与展开
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 表单提交
    submitForm(flg) {
      this.addToSite = flg;
      this.getSiteList();
      this.getTree();
      store.dispatch("baseData/getDistributionAreas");
    },
    // 表单关闭
    closedialogForm(flg) {
      this.addToSite = flg;
    },
    // 树列表点击事件
    treeListClick(data) {
      if (data.type == 1) {
        this.$router.push({
          path: "/thesite",
          query: { areaToken: data.token }
        });
      } else if (data.type == 2) {
        this.$router.push({
          path: "/sitename",
          query: { areaToken: data.token }
        });
      }
    },

    // 树结构方法
    // :render-content="renderContent"
    // renderContent(h, { node, data, store }) {
    // },

    // 树列表查询事件
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    // 获取树状列表
    getTree() {
      let that = this;
      var params = {
        // tenantToken: getCookie("tenant").token,
      };
      getDevicesV2Tree(params).then(res => {
        const { data } = res;
        that.treedata = data;
        // if (res.data.code == 200) {
        //   // var treelist = JSON.parse(
        //   //   JSON.stringify(res.data.data).replace(/name/g, "label")
        //   // );
        //   that.treedata = res.data.data;
        // }
      });
    },

    //点击进入站点详情
    toLinkSiteName(token) {
      this.$router.push({
        path: "/sitename",
        query: { areaToken: token }
      });
    },

    // 获取站点列表
    getSiteList(val) {
      let that = this;
      if (val) {
        that.currentPage = val.currentPage;
        that.pageSize = val.pageSize;
      }
      var params = {
        page: that.pageNum,
        pageSize: that.pageSize
      };

      getDistributionAreas(params).then(res => {
        const { data } = res;
        that.areaList = data.results || [];
        that.total = data.numResults;
      });
    },

    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getSiteList();
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.siteListPage {
  .top-button {
    display: flex;
    align-items: center;
  }
}
.content_site_list {
  background: #fff;
  padding: 20px;
  padding-bottom: 0;
  width: 100%;
}
.res_con {
  display: flex;
}
.all_open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin: 16px 0;
  font-size: 12px;
  color: #666;
}
.open_box {
  align-items: center;
  display: flex;
}
.open_box .icon {
  margin-right: 6px;
}
.type_display {
  display: flex;
  align-items: center;
}
.treeSvg {
  font-size: 10px;
  margin-right: 3px;
  /* margin-bottom: 1px; */
}
.type_5 {
  display: flex;
}
.treeSvg5 {
  width: 8px;
  height: 8px;
  margin-right: 3px;
}

.showTree {
  color: #666;
  /* margin: 5px 10px 0 0; */
  float: left;
  font-size: 12px;
  /* margin-top: 7px; */
}

.switch {
  /* margin: 5px 15px 0 0; */
  /* float: left; */
  margin-left: 15px;
}

.line {
  display: inline-block;
  height: 12px;
  width: 1px;
  vertical-align: middle;
  background-color: #999999;
  /* float: left; */
  /* margin: 8px 15px 0 0; */
  margin: 0 15px;
}

.allOpen {
  position: absolute;
  top: 60px;
  left: 59px;
  height: 16px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

.allOpen:hover {
  cursor: pointer;
}

.allOut {
  position: absolute;
  top: 60px;
  left: 190px;
  height: 16px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

.allOut:hover {
  cursor: pointer;
}

.verticalLine {
  height: 12px;
  width: 1px;
  vertical-align: middle;
  background-color: #e9e9e9;
}

.filter-tree {
}

.treeInput {
  margin-top: 15px;
  padding: 0 10px;
}

/* el-tree样式 */
.el-tree {
  color: rgb(0, 0, 0);
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
}

/* 树节点鼠标悬浮式改变背景色，字体颜色 */
/deep/ .el-tree-node__content:hover {
  background-color: #1890ff;
  color: #fff;
}

/* 改变节点高度 */
/deep/ .el-tree-node__content {
  height: 36px;
}

/* 节点前边的三角图标并不会被节点样式影响，需要单独修改 当前激活的颜色*/
/deep/ .el-tree-node:focus > .el-tree-node__content .el-tree-node__expand-icon {
  color: rgb(0, 192, 250);
}

/* el-tree滚动条样式 */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgb(220, 220, 220);
  --webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(220, 220, 220, 0.4);
}
.treebox {
  margin-right: 6px;
  /* height: calc(100vh - 150px) !important; */
  height: 100%;
  width: 20%;
  background-color: #fff;
}

/deep/ .el-tree-node__content:hover {
  color: #000;
}
</style>
